require(['./config'], () => {
    require([ 'template','req', 'header','jquery', 'footer','zoom'], ( template,req,header) => {
        class Product {
            constructor() {
                this.count = 1
                this.init()
                this.initNum()
            }
            // 初始化input文本框显示数量
            initNum(){
                $('.num_mid').val(this.count)
            }
            init() {
                const id = location.search.split('=')[1]
                // console.log(id)
                req.getDetailsData(id)
                    .then(res => {
                        //    console.log(res)
                        if (res.code === 200) {
                            this.render(res.data)
                        }
                    })
            }
            render(data) {

                const { detail: { descContentList, id, image, price, title, photo } } = data
                $('#detail').html(template('detailsTemplate',{id, image, price, title, photo}))
                $('.xq_nr').html(template('detailsXqTemplate',{list:descContentList}))
                this.initZoom()
                this.bindEvent()
                this.addToCart({ id, image, price, title, photo })
            }
            // 初始化放大镜
            initZoom(){
                $('.zoom-image').elevateZoom({
                    gallery:'smalllist'
                })
            }
            // 绑定事件点击改变数量
            bindEvent(){
                $('.num_left span').click(() => {
                    if(this.count <= 1){
                        return 
                    }
                    this.count--
                    this.initNum()
                })
                $('.num_right span').click(() => {
                    this.count++
                    this.initNum()
                })
            }
            // 点击加入购物车
            addToCart(res){
            //    console.log(res)
               $('.addBtn').click(() => {
                    //先把 prodList 取出来看有没有这条数据
                    let prodList = localStorage.getItem('prodList')  // 也是字符串
                    let flag = false
                    if(prodList){
                        // 有数据
                        prodList = JSON.parse(prodList)
                        // 遍历循环判断 prodList 里面有没有这条数据
                        for(let i = 0 ; i < prodList.length ; i++){
                            if(prodList[i].id === res.id){
                                // 有 数量加
                                prodList[i].count += this.count
                                flag = true
                                break
                            }
                        }
                        if(!flag){
                            // 数组里面没有这条数据
                            prodList.push({...res,count:this.count,checked:true})
                        }
                        // 存
                        localStorage.setItem('prodList',JSON.stringify(prodList))
                    }else{
                        // 没有
                        const arr = [{...res,count:this.count,checked:true}]
                        // 存
                        localStorage.setItem('prodList',JSON.stringify(arr))
                    }
                    //出现小动画
                    // 让 loading 显示然后消失
                    $('.loading').fadeIn(1000,() => {
                        $('.loading').fadeOut(1000)
                    })
                    // 改变头部的数量
                    header.changeCount()
               })
            }
        }
        return new Product()
    })
})